<template>
  <div class="app-container">
    <van-nav-bar title="劳模选举" left-arrow @click-left="$router.back()" />
    <div class="content-box">
      <img class="banner" :src="require('@/assets/images/vote/vote_detail_img.png')" alt="">
      <div class="info-box">
        <div class="title">{{ '2025年度广州市劳模选举活动' }}</div>
        <div class="status">
          <el-tag>{{ '进行中' }}</el-tag>
        </div>
        <div class="tip">{{ '*本次选举共有选举人120名，共选出5名候选人' }}</div>
      </div>
      <el-input class="search-input" v-model="form.name" placeholder="搜索你想要找到的投票" @change="filterList" />
      <div class="list-box">
        <div class="list-content" v-if="listItemList.length">
          <div class="list-item" v-for="(item, index) in listItemList" :key="index" @click="checkVoteItem(index)">
            <img class=" cover-img" :src="require(`@/assets/images/vote/${item.cover}`)">
            <div class="item-top-box">
              <div class="item-detail" @click.stop="toDetail(item)">更多描述</div>
              <div class=" item-check" :class="item.checked && 'checked'" />
            </div>
            <div class="item-bottom-box">{{ item.name }}</div>
          </div>
        </div>
        <div class="empty" v-else>暂无数据</div>
      </div>
      <div class="handle-box">
        <div class="btn" @click="submit">投票</div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'VoteDetail',
  data() {
    return {
      form: { name: '' },
      defaultListItemList: [
        { id: 1, name: '张三', cover: 'vote_option_cover.png', checked: false },
        { id: 2, name: '张三', cover: 'vote_option_cover.png', checked: false },
        { id: 3, name: '张三', cover: 'vote_option_cover.png', checked: false },
        { id: 4, name: '张三', cover: 'vote_option_cover.png', checked: false },
      ],
      listItemList: [],
      voteCheckList: [],
    };
  },
  created() {
    this.listItemList = this.defaultListItemList;
  },
  methods: {
    filterList(title) {
      if (!title) return (this.listItemList = this.defaultListItemList);
      this.listItemList = this.defaultListItemList.filter((item) => item.name.includes(title));
    },
    toDetail(item) {
      this.$router.push('/vote/optionDetail');
    },
    checkVoteItem(index) {
      this.listItemList[index].checked = !this.listItemList[index].checked;
      this.voteCheckList = this.listItemList.filter((voteItem) => voteItem.checked);
    },
    submit() {
      if (!this.voteCheckList.length) return this.$message({ message: '请选择投票', type: 'warning' });
      this.$message({ message: '投票成功', type: 'success' });
      this.$router.push('/vote/index');
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';

.content-box {
  width: calc(100% - 30px);
  height: calc(100% - 70px);
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
}

.banner {
  flex-shrink: 0;
  width: 100%;
}

.info-box {
  flex-shrink: 0;
  border-radius: 10px;
  padding: 15px;
  background-color: #fff;

  & > div {
    margin-bottom: 15px;

    &:last-child {
      margin-bottom: 0px;
    }
  }

  .title {
    color: #3d3d3d;
    font-size: 18px;
    font-weight: bold;
  }

  .tip {
    color: #ff0000;
    font-size: 14px;
  }
}

.search-input {
  margin: 15px 0;

  ::v-deep .el-input__inner {
    border-radius: 20px;
  }
}

// @include list-box-style;

.list-box {
  width: calc(100% - 30px);
  flex: 1;
  border-radius: 10px;
  padding: 15px;
  background-color: #fff;

  .list-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .list-item {
    position: relative;
    width: 48%;
    height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 20px;

    &:nth-child(-n + 2) {
      margin-top: 0px;
    }

    .cover-img {
      z-index: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .item-top-box {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px;

      .item-detail {
        padding: 5px;
        border-radius: 5px;
        background-color: #ffffff7f;
        font-size: 12px;
      }

      .item-check {
        display: inline-block;
        position: relative;
        border: 1px solid #dcdfe6;
        border-radius: 2px;
        box-sizing: border-box;
        width: 25px;
        height: 25px;
        background-color: #fff;
        z-index: 1;
        transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
          background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);

        &:after {
          box-sizing: content-box;
          content: '';
          border: 3px solid #fff;
          border-left: 0;
          border-top: 0;
          height: 14px;
          left: 7px;
          position: absolute;
          top: 2px;
          transform: rotate(45deg) scaleY(0);
          width: 6px;
          transition: transform 0.15s ease-in 0.05s;
          transform-origin: center;
        }

        &.checked {
          background-color: #409eff;
          border-color: #409eff;

          &:after {
            transform: rotate(45deg) scaleY(1);
          }
        }
      }
    }

    .item-bottom-box {
      position: relative;
      z-index: 1;
      background: linear-gradient(180deg, rgba(53, 53, 53, 0) 0%, #a9a9a9 100%);
      padding: 10px 0;
      text-align: center;
      font-size: 14px;
      color: #fff;
    }
  }
}

.handle-box {
  flex-shrink: 0;
  display: flex;
  justify-content: end;
  border-radius: 10px;
  padding: 15px;
  margin-top: 15px;
  background-color: #fff;
  .btn {
    padding: 7px 30px;
    border-radius: 20px;
    background-color: #165dff;
    color: #fff;
    cursor: pointer;
  }
}
</style>
